<!--
  完整主题布局组件

  自动处理主题相关的逻辑，包括：
  - 主题初始化和状态管理
  - 导航栏颜色跟随主题
  - 响应式样式绑定（支持小程序）
  - 全局事件监听和清理
  - 提供完整的CSS变量和工具函数

  使用方法：
  在页面的 <route> 标签中指定 layout: "theme"

  子组件可以使用：
  - CSS变量：var(--primary-color)、var(--bg-color) 等
  - 通过 getCurrentInstance() 访问layout暴露的方法
-->

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { useTheme } from '@/composables/useTheme'

// 使用主题composable
const {
  themeStore,
  themeClass,
  themeStyle,
  isDark,
  primaryColor,
  getCardStyle,
  getButtonStyle,
  getPrimaryStyle,
  getThemeValue,
  initPageTheme,
  cleanupPageTheme,
} = useTheme()

// 生命周期管理
let themeUnwatch: (() => void) | undefined

onMounted(() => {
  // 初始化主题系统
  themeUnwatch = initPageTheme()

  if (import.meta.env.DEV) {
    console.log('完整主题布局已初始化:', {
      theme: themeStore.currentTheme,
      isDark: themeStore.isDarkMode,
      primaryColor: themeStore.getPrimaryColor,
    })
  }
})

onUnmounted(() => {
  // 清理主题监听
  cleanupPageTheme(themeUnwatch)

  if (import.meta.env.DEV) {
    console.log('完整主题布局已清理')
  }
})

// 向子组件暴露主题相关的方法和状态
defineExpose({
  themeStore,
  isDark,
  primaryColor,
  getCardStyle,
  getButtonStyle,
  getPrimaryStyle,
  getThemeValue,
})
</script>

<template>
  <view
    class="layout-theme"
    :class="themeClass"
    :style="themeStyle"
  >
    <!-- 页面内容插槽 -->
    <slot />
  </view>
</template>

<style lang="scss" scoped>
.layout-theme {
  min-height: 100vh;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;

  /* 基础样式变量（兜底机制） */
  --page-bg: #f8f8f8;
  --bg-color: #ffffff;
  --text-color: #333333;
  --text-color-secondary: #666666;
  --text-color-placeholder: #999999;
  --text-color-disabled: #c0c0c0;
  --border-color: #e5e5e5;
  --divider-color: #e5e5e5;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --button-bg: #f0f0f0;
  --navbar-bg: #ffffff;
  --tabbar-bg: #ffffff;
  --tabbar-text: #999999;
  --tabbar-text-active: v-bind('primaryColor');
  --mask-bg: rgba(0, 0, 0, 0.4);
  --primary-color: v-bind('primaryColor');
  --success-color: #4cd964;
  --warning-color: #ff9500;
  --error-color: #ff3b30;
  --info-color: #007aff;

  /* 浅色主题变量 */
  &.theme-light {
    --page-bg: #f8f8f8;
    --bg-color: #ffffff;
    --text-color: #333333;
    --text-color-secondary: #666666;
    --text-color-placeholder: #999999;
    --text-color-disabled: #c0c0c0;
    --border-color: #e5e5e5;
    --divider-color: #e5e5e5;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --button-bg: #f0f0f0;
    --navbar-bg: #ffffff;
    --tabbar-bg: #ffffff;
    --tabbar-text: #999999;
    --mask-bg: rgba(0, 0, 0, 0.4);
  }

  /* 深色主题变量 */
  &.theme-dark {
    --page-bg: #1a1a1a;
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --text-color-secondary: #cccccc;
    --text-color-placeholder: #999999;
    --text-color-disabled: #666666;
    --border-color: #333333;
    --divider-color: #333333;
    --card-bg: #2a2a2a;
    --input-bg: #2a2a2a;
    --button-bg: #333333;
    --navbar-bg: #1a1a1a;
    --tabbar-bg: #1a1a1a;
    --tabbar-text: #cccccc;
    --mask-bg: rgba(0, 0, 0, 0.6);
  }
}

/* 为子组件提供主题相关的样式继承和过渡动画 */
/* #ifndef MP-WEIXIN */
:deep(*) {
  /* 继承基础样式 */
  color: inherit;
  /* 常用组件样式 */
  &.card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
  }

  &.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
  }

  &.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
  }

  &.input {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
  }

  &.divider {
    background-color: var(--divider-color);
  }
}
/* #endif */

/* #ifdef MP-WEIXIN */
/* 微信小程序兼容写法 - 使用具体的组件选择器 */
:deep(view),
:deep(text),
:deep(button),
:deep(input),
:deep(textarea),
:deep(image),
:deep(scroll-view),
:deep(swiper),
:deep(swiper-item) {
  /* 继承基础样式 */
  color: inherit;
}

/* 常用组件样式 - 微信小程序版本 */
:deep(.card) {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

:deep(.btn-primary) {
  background-color: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

:deep(.btn-secondary) {
  background-color: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}

:deep(.input) {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

:deep(.divider) {
  background-color: var(--divider-color);
}
/* #endif */

/* 小程序平台特殊处理 */
/* #ifdef MP */
.layout-theme {
  /* 小程序下确保主题变量正确应用 */
  background-color: var(--page-bg);
  color: var(--text-color);
}
/* #endif */

/* H5平台特殊处理 */
/* #ifdef H5 */
.layout-theme {
  /* H5下添加更丰富的视觉效果 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* #endif */
</style>
